@use "./_vars/tailwind.scss" as *;

#root, .app-layout-wrap {
  height: 100vh;
  overflow: hidden;
}
.app-layout-wrap {
  @apply flex flex-col;
  .app-layout-content-wrap {
    @apply flex-1 relative overflow-hidden;
    .page-wrap {
      @apply absolute top-0 left-0 right-0 bottom-0;
    }
  }
}

.scroll-ele-wrapper {
  @apply absolute top-0 left-0 right-0 bottom-0 overflow-x-hidden overflow-y-auto;
}

.app-header {
  @apply border-b border-b-[#0505050f] flex items-center bg-white/60 px-6 py-4;
}
.operation-page-wrap {
  @apply overflow-hidden flex flex-col;
  .action-wrap {
    @apply px-6 py-3;
    > div:nth-child(2), > div:nth-child(3) {
      @apply mt-2;
    }
  }
  .log-wrap {
    @apply flex-1 relative;
    .wss-logs-wrap {
      @apply px-4;
      .log-item {
        @apply mt-2;
        &:nth-child(1) {
          @apply mt-0;
        }
        &:nth-last-child(1) {
          @apply mb-4;
        }

      }
    }
  }
}
.slick-dots.slick-dots-bottom {
  // @apply bg-white;
}
.ant-carousel .slick-dots li {
}
.ant-carousel .slick-dots li button {
  @apply bg-red-500 opacity-95 h-1.5;
}
.ant-carousel .slick-next, .ant-carousel .slick-prev {
  @apply w-8 h-8 opacity-100 text-red-700 !important;
  &::after {
    @apply w-8 h-8;
  }
}
